<template>
    <div>
        <el-card class="!border-none" shadow="never">

            <el-table size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="序号" type="index" min-width="80" />
                <el-table-column label="助融分" min-width="180" prop="threshold_score"/>
                <el-table-column label="状态" min-width="120" prop="type">
                    <template #default="{ row }">
                        <span v-if="row.is_enable == 1">启用</span>
                        <el-link v-else type="danger" :underline="false">停用</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" fixed="right">
                    <template #default="{ row }">
                        <el-link class="link mr-4" v-perms="['channel.channel_score_style/detail']" type="primary" :underline="false" @click="handleEdit(row)">编辑</el-link>
                        <el-link v-if="row.is_enable != 1" class="link" v-perms="['channel.channel_score_style/updateStatus']" type="primary" :underline="false" @click="handleOpen(row)">启用</el-link>
                        <el-link v-if="row.is_enable == 1" class="link" v-perms="['channel.channel_score_style/updateStatus']" type="danger" :underline="false" @click="handleClose(row)">停用</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <el-dialog
                v-model="showIcon"
                title="编辑标签"
                width="500"
                @close="handleDiaClose"
        >
            <el-form
                ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="10"
                require-asterisk-position="right"
            >
                <el-form-item label="" prop="threshold_score">
                    <div class="flex">
                        <div>当助融分大于</div>
                        <div class="w-28">
                            <el-input
                                v-model="formData.threshold_score"
                                placeholder="请输入"
                                type="text"
                                maxlength="5"
                                clearable
                            />
                        </div>
                        <div>时，app助融分颜色发生改变</div>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button v-perms="['channel.channel_score_style/edit']" type="primary" @click="onSubmit" :loading="loading">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup name="meltStyle">
import { usePaging } from '@/hooks/usePaging';
import { styleLists, styleDetail, styleEdit, styleStatus } from '@/api/operation';
import type {FormInstance} from 'element-plus';
import feedback from '@/utils/feedback'
const queryParams:any = reactive({
		
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: styleLists,
    params: queryParams
})
const formRef = shallowRef<FormInstance>()
const showIcon = ref(false);
const formData:any = reactive({
    id: '',
    threshold_score: '',
})
const rules = reactive({
    name: [{required: true, message: '请输入标签名称', trigger: 'blur'}],
    threshold_score: [{required: true, message: '请输入助融分', trigger: 'blur'}],
})
const handleDiaClose = () => {
    console.log('===')
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
    },30);
}

const onCancel = () => {
    setTimeout(function () {
        formRef.value?.clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
    },30);
    showIcon.value = false
}
const loading = ref(false)
const onSubmit = async() => {
    try{
        await formRef.value?.validate()
        loading.value = true;
        console.log(formData)
        await styleEdit(formData)
        showIcon.value = false;
        getLists()
    }catch(error){
        console.log(error)
    }
}

const handleEdit = async (row:any) => {
    const res = await styleDetail({id: row.id});
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = res[key]
    })
    loading.value = false;
    showIcon.value = true;
}
const handleOpen = async (row:any) => {
    try{
        await feedback.confirm('启用之后，渠道可正常显示助融分颜色样式')
        await styleStatus({
            id: row.id,
            is_enable: 1
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}
const handleClose = async (row:any) => {
    try{
        await feedback.confirm('停用之后，将取消显示助融分的颜色样式')
        await styleStatus({
            id: row.id,
            is_enable: 0
        })
        getLists();
    }catch(error){
        console.log(error)
    }
}

onMounted(async () => {
    getLists();
});
</script>
